"use client"; // 添加这一行，使组件变为 Client Component
import { useContext, useEffect, useRef, useState, } from "react";
import { useDrop } from "react-dnd";
import { Collapse, CollapseProps } from "antd";
import { v4 as uuidv4, Version4Options } from 'uuid';
import DraggableRowView from "../Draggable/container/Row";
import InputView from "../Draggable/subassembly/input";
import { NodeMapContext } from "@/providers/NodeMapContext";
import { useNodeMap } from "@/store/client/modules/reactdndStore/useNode";
import ButtonView from "../Draggable/subassembly/button";

interface MyComponentProps {
  handleDrop?: (e?: any) => void;
  state?: any;
  children?: any;
}

const LeftDropableView: React.FC<MyComponentProps> = () => {
  const [uuid, setUuid] = useState<any>();
  const { boxData, boxIndex } = useNodeMap()
  useEffect(() => {
    // 这仅在客户端执行
    setUuid(uuidv4);
  }, [boxData]);

  const items: CollapseProps['items'] = [
    {
      key: '1',
      label: '容器',
      children: <div ><DraggableRowView key={uuid} data={{ id: uuid }} /></div>,
    },
    {
      key: '2',
      label: '组件',
      children: <div className={'flex justify-around'}>

        <InputView key={`input_${uuid}`} data={{ id: uuid,name:"input",label:"input" }} />
        <ButtonView key={`button_${uuid}`} data={{ id: uuid,name:"button",label:"button" }} />
      </div>,
    },
  ];
  const onChange = (key: string | string[]) => {
    // console.log(key);
  };

  if (!uuid) return null; // 避免 SSR 阶段渲染不一致
  return (

    <div
      className={'w-full h-full  rounded border border-dashed border-gray-400'}>
      <Collapse items={items} defaultActiveKey={['1', '2']} ghost onChange={onChange} />
    </div>
  )

}
export default LeftDropableView;